<template>
    <div class="title">
      <div class="title-bc"></div>
      <div class="title-info">
        <div class="title-content">
          <img src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Fstone.jpg" alt="">
          <div class="title-content-info">
            <div class="nickname">Stone</div>
            <div class="sex"><el-icon style="color:#409EFF;"><Location /></el-icon>自贡 &nbsp;<el-icon style="color: #409EFF;"><Male /></el-icon>男</div>
            <div class="text">咕咕咕...</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script lang="ts" setup >

</script>

<style lang="less" scoped>
  .title {
    height: 300px;
    border-radius: 15px;
    border-bottom: 2px solid rgb(93, 124, 239);
    .title-bc {
      height: 200px;
      background: url('@/assets/img/路过宇宙.jpg') center/cover;
    }
    .title-info {
      display: flex;
      justify-content: center;
      position: relative;
      .title-content {
        position: absolute;
        display: flex;
        justify-content: center;
        top: -50px;
        width: 80%;
        height: 150px;
        margin: auto;
        img {
          width: 100px;
          height: 100px;
          border-radius: 10px;
          margin-right: 10px;
        }
        .title-content-info {
          margin-top: 50px;
          .nickname {
            font-weight: border;
            color: #a9adcfef;
          }
          .sex {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-top: 10px;
            color:#a9adcfef;
          }
          .text {
            margin-top: 20px;
            color:#a9adcfef;
            font-size: 14px;
          }
        }
      } 
      
      
    }
  }
</style>
